<template>
	<!-- 背景图 -->
	<!-- <image style="
		      position: fixed; 
		      top: 0; 
		      left: 0; 
		      width: 100%; 
		      height: 100%; 
		      z-index: -1; 
		      object-fit: cover;
		    " src="/static/backPng/back.png">
			</image> -->
	<!-- <u-grid-item @click="goOther('测试')" class="grid-item">
				<u-icon name="calendar" :size="46" color="#E6A23C"></u-icon>
				<text class="grid-text">测试</text>
			</u-grid-item> -->
	<div class="home-page">
		<u-grid :col="3" :gutter="30">
			<!-- <u-grid-item @click="goOther('年级')" class="grid-item">
				<u-icon name="map-fill" :size="46" color="#409EFF"></u-icon>
				<text class="grid-text">年级名单</text>
			</u-grid-item> -->
			<u-grid-item @click="goOther('年级成绩')" class="grid-item">
				<u-icon name="calendar" :size="46" color="#409EFF"></u-icon>
				<text class="grid-text">年级成绩</text>
			</u-grid-item>
			<u-grid-item @click="goOther('计算')" class="grid-item">
				<u-icon name="edit-pen-fill" :size="46" color="#67C23A"></u-icon>
				<text class="grid-text">积分数据</text>
			</u-grid-item>
			<u-grid-item @click="goOther('教程')" class="grid-item">
				<u-icon name="kefu-ermai" :size="46" color="#67C23A"></u-icon>
				<text class="grid-text">教程</text>
			</u-grid-item>
			<u-grid-item @click="goOther('设置')" class="grid-item">
				<u-icon name="setting" :size="46" color="#E6A23C"></u-icon>
				<text class="grid-text">设置</text>
			</u-grid-item>
			<u-grid-item @click="goOther('抽签')" class="grid-item">
				<u-icon name="coupon" :size="46" color="#67C23A"></u-icon>
				<text class="grid-text">随机抽签</text>
			</u-grid-item>
			<!-- <u-grid-item @click="goOther('班级')" class="grid-item">
				<u-icon name="account" :size="46" color="#409EFF"></u-icon>
				<text class="grid-text">班级管理</text>
			</u-grid-item>

			<u-grid-item @click="goOther('成绩')" class="grid-item">
				<u-icon name="file-text" :size="46" color="#E6A23C"></u-icon>
				<text class="grid-text">班级成绩</text>
			</u-grid-item> -->
			<u-grid-item @click="goOther('后台')" class="grid-item">
				<u-icon name="home" :size="46" color="#E6A23C"></u-icon>
				<text class="grid-text">后台</text>
			</u-grid-item>
		</u-grid>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				dbName: 'testDb',
			}
		},
		created() {
			// 检查数据库是否打开
			if (this.dbName) {
				this.$dbUtils.openDb(this.dbName);
				// 检查表格是否存在
				this.checkTables();
				if (!uni.getStorageSync("用户初始化")) {
					uni.setStorageSync("用户初始化", '1');
					uni.navigateTo({
						url: '/pages/index/tip',
						animationType: 'fade-in',
						animationDuration: 200
					});
				}

			}
		},
		methods: {
			goOther(name) {
				if (name === "后台") {
					uni.navigateTo({
						url: '/pages/index/houTai',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "班级") {
					uni.navigateTo({
						url: '/pages/index/classManage',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "成绩") {
					uni.navigateTo({
						url: '/pages/index/scores',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "年级") {
					console.log("点击了")
					uni.navigateTo({
						url: '/pages/index/grade',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "测试") {
					console.log("点击了")
					uni.navigateTo({
						url: '/pages/index/ceshi',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "年级成绩") {
					console.log("点击了年级成绩")
					uni.navigateTo({
						url: '/pages/index/gradeScores',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "抽签") {
					console.log("抽签")
					uni.navigateTo({
						url: '/pages/index/chouQian',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "设置") {
					console.log("设置")
					uni.navigateTo({
						url: '/pages/index/set',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "计算") {
					console.log("计算")
					uni.navigateTo({
						url: '/pages/index/jiSuan',
						animationType: 'fade-in',
						animationDuration: 200
					});
				} else if (name === "教程") {
					console.log("教程")
					uni.navigateTo({
						url: '/pages/index/tip',
						animationType: 'fade-in',
						animationDuration: 200
					});
				}
			},
			// 检查表是否存在的函数
			async checkTables() {
				try {
					const [studentExists, scoresExists, gradeStudents, gradeScores, scoreChart] = await Promise.all([
						this.$dbUtils.isTable('testDb', 'students'),
						this.$dbUtils.isTable('testDb', 'scores'),
						this.$dbUtils.isTable('testDb', 'gradeStudents'),
						this.$dbUtils.isTable('testDb', 'gradeScores'),
						this.$dbUtils.isTable('testDb', 'scoreChart'),
					]);

					console.log('学生表是否存在：' + studentExists);
					console.log('成绩表是否存在：' + scoresExists);
					console.log('年级学生表是否存在：' + gradeStudents);
					console.log('年级成绩表是否存在：' + gradeScores);
					console.log('积分图表是否存在：' + scoreChart);

					// 如果表不存在，创建它
					if (!studentExists) {
						this.createStudentTable();
					}

					if (!scoresExists) {
						this.createScoresTable();
					}

					if (!gradeStudents) {
						this.createGradeStudentsTable();
					}

					if (!gradeScores) {
						this.createGradeScoresTable();
					}

					if (!scoreChart) {
						this.createScoreChartTable();
					}
				} catch (error) {
					console.error('检查表时发生错误：', error);
				}
			},
			// 创建学生表格
			createStudentTable() {
				const sql = `
						        CREATE TABLE IF NOT EXISTS students (
						            id INTEGER PRIMARY KEY AUTOINCREMENT, /* 自增id主键 */
						            name TEXT NOT NULL, /* 姓名 */
						            student_id TEXT NOT NULL UNIQUE, /* 学号 */
						            class TEXT NOT NULL /* 班级 */
						        );
						    `;

				this.$dbUtils.addTab('testDb', sql)
					.then(() => {
						console.log('students Table created successfully');
					})
					.catch(err => console.error('Error creating students table :', err));
			},
			// 创建成绩表格
			createScoresTable() {
				const sql = `
						       CREATE TABLE IF NOT EXISTS scores (
						           id INTEGER PRIMARY KEY AUTOINCREMENT, /* 主键，自增 */
								   name TEXT NOT NULL, /* 姓名 */
						           student_id TEXT NOT NULL REFERENCES students(student_id) ON DELETE CASCADE ON UPDATE NO ACTION, /* 外键，关联学生表 */
						           week INTEGER NOT NULL, /* 周数 */
						           score INTEGER NOT NULL, /* 成绩 */
						           class_rank INTEGER, /* 班级排名 */
						           grade_rank INTEGER /* 年级排名 */
						       );
						    `;

				this.$dbUtils.addTab('testDb', sql)
					.then(() => {
						console.log('scores Table created successfully');
					})
					.catch(err => console.error('Error creating scores table:', err));
			},
			// 创建年级学生表格
			createGradeStudentsTable() {
				const sql = `
				        CREATE TABLE IF NOT EXISTS gradeStudents (
				            id INTEGER PRIMARY KEY AUTOINCREMENT,  /* 自增主键*/
				            student_class TEXT NOT NULL,                   /* 班级*/
				            student_id INTEGER NOT NULL,           /* 学号*/
				            name TEXT NOT NULL,                    /* 姓名*/
				            UNIQUE (student_class, student_id)             /* 确保班级和学号组合唯一*/
				        );
				    `;

				this.$dbUtils.addTab('testDb', sql)
					.then(() => {
						console.log('gradeStudents Table created successfully');
					})
					.catch(err => console.error('Error creating gradeStudents table:', err));
			},
			// 创建年级成绩表格
			createGradeScoresTable() {
				const sql = `
						       CREATE TABLE IF NOT EXISTS gradeScores (
						           id INTEGER PRIMARY KEY AUTOINCREMENT, /* 主键，自增 */
								   name TEXT NOT NULL, /* 姓名 */
								   student_id INTEGER NOT NULL,           /* 学号*/
								   student_class TEXT NOT NULL,     /* 班级 */   
						           week INTEGER NOT NULL, /* 周数 */
						           score INTEGER NOT NULL, /* 成绩 */
						           class_rank INTEGER, /* 班级排名 */
						           grade_rank INTEGER, /* 年级排名 */
								   UNIQUE (name, week,student_id)             /* 确保姓名和周数组合唯一*/
						       ); 
						    `;

				this.$dbUtils.addTab('testDb', sql)
					.then(() => {
						console.log('gradeScores Table created successfully');
					})
					.catch(err => console.error('Error creating gradeScores table:', err));
			},
			// 积分图表
			createScoreChartTable() {
				const sql = `
						       CREATE TABLE IF NOT EXISTS scoreChart (
						           id INTEGER PRIMARY KEY AUTOINCREMENT, /* 主键，自增 */
								   className TEXT NOT NULL,     /* 班级 */   
						           week INTEGER NOT NULL, /* 周数 */
						           averageScore INTEGER NOT NULL, /* 平均成绩 */
								   totalPoints INTEGER NOT NULL, /* 积分 */
								   UNIQUE (className, week)             /* 确保姓名和周数组合唯一*/
						       ); 
						    `;

				this.$dbUtils.addTab('testDb', sql)
					.then(() => {
						console.log('scoreChart Table created successfully');
					})
					.catch(err => console.error('Error creating scoreChart table:', err));
			},
		}
	}
</script>

<style scoped>
	.home-page {
		margin-top: 50rpx;
		padding: 20px;
		/* background-color: #f5f7fa; */
	}

	.grid-item {
		background-color: #ffffff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.grid-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
	}

	.grid-text {
		font-size: 16px;
		color: #606266;
		margin-top: 10px;
		font-weight: bold;
	}
</style>